<template>
	<view class="splash-box">
		<!-- <view class="toptext" @click="LinkIndex">
			<view class="text">
				{{$t('Contact')}}
				<u-icon name="phone-fill" color="#45bc1b" size="28"></u-icon>
			</view>
		</view> -->
		<view class="toptext-left">
			<Lang></Lang>
		</view>
		<view class="top-content">
			<image src="../../static/images/Frame.png" mode="widthFix"></image>
			<view class="title">DikiDiki</view>
			<view class="sub-title">{{$t('GreenHealthyLife')}}</view>
		</view>

		<view :class="i18nLocale=='ug'?'ug-from from-box':'from-box'">

			<view class="login-button" @click="changelogin">
				<u-icon name="weixin-fill" color="#fff" size="28"></u-icon>
				<text>{{$t('Login')}}</text>
			</view>
			<!-- <view class="enroll-box">
				<text>{{$t('EnrollText')}}</text><text class="enroll" @click="changeEnroll">{{$t('Enroll')}}</text>

			</view> -->

		</view>
		<Loading :show="loadshow" :text="$t('Loading')"></Loading>
	</view>
</template>

<script>
	import Lang from "@/components/Lang.vue"
	import {
		login
	} from '@/api/all.js';

	export default {
		components: {
			Lang
		},
		data() {
			return {
				time: 4,
				code: '',
				loadshow: false
			};
		},
		onLoad() {
			this.code = this.getUrlCode().code; // 截取code
			if (this.code == null || this.code === '' || this.code == undefined) {} else {
				this.getlogin(this.code);
			}
		},
		computed: {
			i18nLocale() {
				return this.$i18n.locale;
			},
		},
		methods: {
			changeEnroll() {
				uni.navigateTo({
					url: '/pages/main/audit'
				})
			},
			changelogin() {
				this.getCode();

			},
			//登录
			getCode() {
				var local = window.location.href.replace(/\#/g, "%23"); // 当前H5页面的url
				// var local = 'http://dikidiki.kompas.world/api/auth'
				var appid = 'wxa4e9e34d21e281c9';
				var scope = "snsapi_userinfo"
				this.code = this.getUrlCode().code; // 截取code
				// 如果没有code，则去请求
				if (this.code == null || this.code === '' || this.code == undefined) {
					var wxUrl =
						`https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appid}&redirect_uri=${local}&response_type=code&scope=${scope}&state=STATE#wechat_redirect`;
					console.log(wxUrl, '++++^^^^^^^^^+++++')
					window.location.href = wxUrl;
					this.loadshow = true;
				}
			},

			getUrlCode() {
				// 截取url中的code方法
				var url = location.href; //获取打开的公众号的路径
				let winUrl = url;
				var theRequest = new Object();
				if (url.indexOf('?') != -1) {
					var str = url.substr(url.indexOf('?') + 1);
					var strs = str.split('&');
					for (var i = 0; i < strs.length; i++) {
						var items = strs[i].split('=');
						theRequest[strs[i].split('=')[0]] = strs[i].split('=')[1];
					}
				}
				return theRequest;
			},

			getlogin(code) {
				let that = this;
				this.loadshow = true;
				login({
					code: code
				}).then(res => {
					if (res.code == 200) {
						let data = res.body;
						console.log(data, '++++')
						that.$store.commit('setUsertoken', data.token);
						that.$store.commit('setUserinfo', data.shopinfo);
						this.loadshow = false;
						if (data.shopinfo.is_locked) {
							const url = this.ridUrlParam(window.location.href, ['code', 'state']);
							const parts = url.split("#");
							window.location.href = parts[0] + '#/pages/main/audit';
						}else{
							const url = this.ridUrlParam(window.location.href, ['code', 'state']);
							const parts = url.split("#");
							window.location.href = parts[0] + '#/pages/main/main';
						}
					}

				})
			},
			ridUrlParam(url, params) {
				/**
				 * 删除URL中指定search参数,会将参数值一起删除
				 * @param {string} url 地址字符串
				 * @param {array} aParam 要删除的参数key数组，如['name','age']
				 * @return {string} 返回新URL字符串
				 */
				for (var index = 0; index < params.length; index++) {
					var item = params[index];
					var fromIndex = url.indexOf(item + "="); //必须加=号，避免参数值中包含item字符串
					if (fromIndex !== -1) {
						// 通过url特殊符号，计算出=号后面的的字符数，用于生成replace正则
						var startIndex = url.indexOf("=", fromIndex);
						var endIndex = url.indexOf("&", fromIndex);
						var hashIndex = url.indexOf("#", fromIndex);

						var reg = "";
						if (endIndex !== -1) {
							// 后面还有search参数的情况
							var num = endIndex - startIndex;
							reg = new RegExp(item + "=.{" + num + "}");
							url = url.replace(reg, "");
						} else if (hashIndex !== -1) {
							// 有hash参数的情况
							var num = hashIndex - startIndex - 1;
							reg = new RegExp("&?" + item + "=.{" + num + "}");
							url = url.replace(reg, "");
						} else {
							// search参数在最后或只有一个参数的情况
							reg = new RegExp("&?" + item + "=.+");
							url = url.replace(reg, "");
						}
					}
				}
				var noSearchParam = url.indexOf("=");
				if (noSearchParam === -1) {
					url = url.replace(/\?/, ""); // 如果已经没有参数，删除？号
				}
				return url;
			},

		}
	}
</script>

<style lang="scss" scoped>
	.splash-box {
		width: 100%;
		height: 100vh;
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		box-sizing: border-box;
		padding: 0rpx 50rpx;
		position: relative;

		.toptext {
			position: absolute;
			top: 4%;
			right: 5%;
			display: flex;
			align-items: center;
			//  border: 1px solid #fff;
			padding: 5px 15px;
			border-radius: $uni-border-radius-base;
			background-color: $uni-color-parbg;
			font-size: $uni-font-size-base;

			.text {
				// margin-right: 10px;
				display: flex;
				align-items: center;
			}

			.time {
				border-radius: 100%;
				display: flex;
				justify-content: center;
				align-items: center;
			}
		}

		.toptext-left {
			position: absolute;
			top: 4%;
			left: 5%;
		}

		.from-box {
			width: 100%;
			border-radius: 30rpx;
			box-sizing: border-box;
			padding: 30rpx 30rpx;
			margin-top: 0rpx;

			.item {
				width: 100%;
				display: flex;
				align-items: center;
				margin-top: 50rpx;
				background-color: #fff;
				box-sizing: border-box;
				padding: 10rpx 20rpx;
				border-radius: 20rpx;

				.input {
					width: auto;
					padding: 10rpx 20rpx;
				}

				.title {
					width: 30%;
					// border-left: 2rpx solid $uni-border-color;

				}
			}

			.enroll-box {
				width: 100%;
				margin: 30rpx auto;
				display: flex;
				align-items: center;
				justify-content: center;
				// justify-content: space-between;
				color: $uni-text-color-grey;
				font-size: $uni-font-size-base;

				.enroll {
					color: $uni-color-topic;
					padding: 0rpx 10rpx;

				}
			}

			.login-button {
				width: 70%;
				margin: 0 auto;
				padding: 20rpx 0rpx;
				background-color: $uni-color-topic;
				display: flex;
				justify-content: center;
				align-items: center;
				margin-top: 30rpx;
				border-radius: $uni-border-radius-base;
				color: #fff;

				text {
					padding: 0rpx 20rpx;
				}
			}

		}

		.ug-from {
			direction: rtl;

			/deep/ .uni-input-input {
				direction: rtl !important;
				text-align: right;
			}

			/deep/ .uni-input-placeholder {
				text-align: right;
			}
		}

		.top-content {
			display: flex;
			flex-direction: column;
			align-items: center;
			padding-top: 150rpx;
			box-sizing: border-box;

			.title {
				margin-top: 10rpx;
				font-size: 50rpx;
				color: $uni-color-topic;
			}

			.sub-title {
				margin-top: 10rpx;
				font-weight: 500;
				font-size: $uni-font-size-base;
			}

			image {
				width: 320rpx;
			}
		}

		.footer {
			display: flex;
			flex-direction: column;
			align-items: center;
			color: $uni-color-paraphrase;
			padding-top: 200rpx;

		}
	}
</style>